<script setup>
import { reactive, ref } from 'vue';
import SingleUpload from '@/components/upload/singleUpload.vue';
import { saveBrandInfoApi, getBrandInfoApi, updateBrandInfoApi } from '@/apis/pms/brand.js'

// 图片分类
const uploadType = "brand";

// 事件刷新页面数据
const emits = defineEmits(["refreshData"])

// 展示面板,标题
const dialogVisible = ref(false)
const title = ref('')

// 数据
const brandForm = ref({})

// 初始化
const init = async (id) => {
  if (id === null || id === '' || id === void 0) {
    brandForm.value = {};
    brandForm.visible = 1;
    title.value = '添加'
    dialogVisible.value = true;
  } else {
    brandForm.value = {};
    title.value = '修改'
    const res = await getBrandInfoApi(id);
    brandForm.value = res.data;
    dialogVisible.value = true;
  }
}

defineExpose({
  init,
})

// 取消
const singleUploadComponent = ref();
const handleCancel = () => {
  if (brandForm.value.id === null || brandForm.value.id === '' || brandForm.value.id === void 0) {
    if (brandForm.value.logoUrl === null || brandForm.value.logoUrl === '' || brandForm.value.logoUrl === void 0) {
      dialogVisible.value = false;
    } else {
      // id为空,添加时点击取消，删除上传的图片
      singleUploadComponent.value.handleRemove();
      dialogVisible.value = false;
    }
  } else {
    // 修改点击取消，不能删除
    dialogVisible.value = false;
  }
}

// 确定
const handleConfirm = () => {
  // 没有id是添加
  if (brandForm.value.id === null || brandForm.value.id === '' || brandForm.value.id === void 0) {
    saveBrandInfoApi(brandForm.value)
      .then(res => {
        if (res.code === 0) {
          ElMessage({
            message: '添加成功',
            type: 'success',
          })
          emits("refreshData")
          dialogVisible.value = false;
        }
      })
  } else {
    // 有是修改
    updateBrandInfoApi(brandForm.value)
      .then(res => {
        if (res.code === 0) {
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
          emits("refreshData")
          dialogVisible.value = false;
        }
      })
  }
}

// 首字母数据校验
const checkFirstLetter = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请输入首字母"))
  } else if (!/^[a-zA-Z]$/.test(value)) {
    callback(new Error("首字母必须a-z或A-Z之间"))
  } else {
    callback()
  }
}

// 排序数据校验
const checkSort = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请输入排序字段"))
  } else if (value < 0) {
    callback(new Error("排序字段必须是一个大于等于0的数"))
  } else {
    callback()
  }
}

// 数据校验
const rules = reactive({
  name: [{ required: true, message: '请输入品牌名', trigger: 'blur' }],
  firstLetter: [{ required: true, validator: checkFirstLetter, trigger: 'blur' }],
  sort: [{ required: true, validator: checkSort, trigger: 'blur' }]
})


</script>

<template>
  <el-dialog v-model="dialogVisible" :title="title" style="width: 35%;">
    <el-form style="width: 96%;" :model="brandForm" :rules="rules" status-icon label-width="90px">
      <el-form-item label="品牌名" prop="name">
        <el-input v-model="brandForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="首字母" prop="firstLetter">
        <el-input v-model="brandForm.firstLetter" autocomplete="off" />
      </el-form-item>
      <el-form-item label="是否展示" prop="visible">
        <el-switch v-model="brandForm.visible" class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value="0" :inactive-value="1" />
      </el-form-item>
      <el-form-item label="品牌图片" prop="logoUrl">
        <SingleUpload v-model:picture="brandForm.logoUrl" :uploadType="uploadType" :width="150" :height="150"
          ref="singleUploadComponent"></SingleUpload>
      </el-form-item>
      <el-form-item label="品牌简介" prop="describe">
        <el-input v-model="brandForm.describe" type="textarea" />
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="brandForm.sort" autocomplete="off" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang='scss'></style>